<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>商户详情</title>
		<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../../css/commontCust.css" />
		<link rel="stylesheet" type="text/css" href="../../css/mui.min.css" />
	</head>

	<body>
		<div style="height: 100%;width: 100%;" class="divColumn divCenter">
			<div style="height: 50px;width: 100%;background-color: #05508a;position: fixed;top: 0px;" class="divRow divColumnCenter">
				<div style="width: 30%;height: 100%;padding-left: 10px;" class="divColumnCenter" id="btnBack">
					<img src="../../img/left_back.png" />
				</div>

				<div style="width: 80%;height: 100%;" class="divCenter">
					<span style="color: white;font-size: 18px;">商户详情</span>
				</div>
				<div style="width: 30%;height: 100%;padding-right: 10px;" class="divCenter">

				</div>

			</div>

			<div style="width: 100%;height: auto;margin-top:50px;">
				<div id="slider" class="mui-slider">
					<div class="mui-slider-group mui-slider-loop" style="height: 188px;">
						<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556597145907&di=6eb2192dac4e3aa90b11e1255eb3376f&imgtype=0&src=http%3A%2F%2Fwww.hxytea.cn%2FContent%2FUploadFiles%2Fimage%2F20141118%2F20141118155656_7981.jpg">
							</a>
						</div>
						<!-- 第一张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556597145907&di=4987eeae1b518188fff96058b32b3d18&imgtype=0&src=http%3A%2F%2Fuploads.chinatimes.cc%2Farticle%2F201705%2F20170522155511ZNWDdQpgXv.jpg">
							</a>
						</div>
						<!-- 第二张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556597145906&di=cabdfbf7e34e42451a9dcb15a8e4bab5&imgtype=0&src=http%3A%2F%2Fphotocdn.sohu.com%2F20150812%2Fmp26974199_1439345890474_1_th.jpeg">
							</a>
						</div>
						<!-- 第三张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556597145904&di=1f3ef1660e498d89008d1229353e8106&imgtype=0&src=http%3A%2F%2Fimg2.ctoutiao.com%2Fuploads%2F2017%2F08%2F19%2Fce39b4a7575656a0d12998132162be63.jpg">
							</a>
						</div>
						<!-- 第四张 -->
						<div class="mui-slider-item">
							<a href="#">
								<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556597145901&di=b63acb658ca0f113a313a03e2293e133&imgtype=0&src=http%3A%2F%2Fimg.mp.itc.cn%2Fupload%2F20170416%2F077c9bfdb0e84a47bedba1928be1d6f0_th.jpeg">
							</a>
						</div>
						<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
						<div class="mui-slider-item mui-slider-item-duplicate">
							<a href="#">
								<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1556597145899&di=04114676b295e11ee2ff2b847c9ec395&imgtype=0&src=http%3A%2F%2Fhxytea.com%2FImages%2FStrategy%2FStrategy1_img.jpg">
							</a>
						</div>
					</div>
					<div class="mui-slider-indicator">
						<div class="mui-indicator mui-active"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
						<div class="mui-indicator"></div>
					</div>
				</div>

			</div>

			<div style="width: 100%;height: auto;background: white;padding: 10px;margin-top: 10px;" class="divColumn">
				<div style="width: 100%;height: 42px;" class="divRow divColumnCenter">
					<span style="color: #999999;font-size: 14px;">商户名称</span>
					<span style="color: black;font-size: 14px;margin-left: 12px;">连锁开锁店</span>

				</div>
				<div style="width: 100%;height: 1px;background-color: #F0F0F0;"></div>
				<div style="width: 100%;height: 42px;" class="divRow divColumnCenter">
					<span style="color: #999999;font-size: 14px;">主营业务</span>
					<span style="color: black;font-size: 14px;margin-left: 12px;">五金</span>

				</div>
				<div style="width: 100%;height: 1px;background-color: #F0F0F0;"></div>
				<div style="width: 100%;height: 42px;" class="divRow divColumnCenter">
					<span style="color: #999999;font-size: 14px;">联系姓名</span>
					<span style="color: black;font-size: 14px;margin-left: 12px;">刘</span>

				</div>
				<div style="width: 100%;height: 1px;background-color: #F0F0F0;"></div>
				<div style="width: 100%;height: 42px;" class="divRow divColumnCenter">
					<span style="color: #999999;font-size: 14px;">联系电话</span>
					<span style="color: black;font-size: 14px;margin-left: 12px;">15070163132</span>

				</div>
				<div style="width: 100%;height: 1px;background-color: #F0F0F0;"></div>
				<div style="width: 100%;height: 42px;" class="divRow divColumnCenter">
					<span style="color: #999999;font-size: 14px;">商户名称</span>
					<span style="color: black;font-size: 14px;margin-left: 12px;">岳麓区金星路湘腾城市广场1602</span>

				</div>

			</div>
			<div style="width: 100%;height: auto;margin-top: 10px;padding: 10px;background: white;margin-bottom: 54px;" class="divRow">
				<span style="width: 20%;color: #999999;font-size: 14px;">
						备注信息
					</span>
				<span style="width: 80%;color: black;font-size: 14px;">
						全国连锁品牌，店内还有自产土特产：乡里 腊肉、乡里腊肉、乡里腊肉、乡里腊肉、乡 里腊肉、乡里腊肉、乡里腊肉、乡里腊肉
					</span>
			</div>
			<div style="width: 100%;height: 54px;background:url(../../img/bottom_img.png);background-size: 100% 100%;position: fixed;bottom: 0px;" class="divRow divCenter">

				<div style="width: 100%;height: 100%;" class="divRow divCenter">
					<img src="../../img/call_img.png" style="width: 8%;" />
					<span style="color: white;font-size: 14px;margin-left: 10px;">联系商户</span>
				</div>
				<!--<div style="width: 1px;height: 60%;background-color: #FFFFFF;"></div>
				<div style="width: 50%;height: 100%;" class="divRow divCenter">
					<img src="../../img/navigation_img.png" style="width: 16%;" />
					<a style="color: white;font-size: 14px;margin-left: 10px;" href="#forward">导航到此</a>
				</div>-->
			</div>
			<!--导航弹出框-->
			<div id="forward" class="mui-popover mui-popover-action mui-popover-bottom" style="padding: 10px 10px;">
				<div style="height: 234px;width: 100%;" class="divColumn">
					<div style="height: 164px;width: 100%;background: white;border-radius: 10px;" class="divColumn">
						<div style="width: 100%;height: 50px;line-height: 50px;text-align: center;color: #76AA00;font-size: 16px;">请选择导航地图</div>
						<div style="width: 100%;height: 1px;background-color: #B3AFAF;"></div>
						<div style="width: 100%;height: 36px;line-height: 36px;text-align: center;color: black;font-size: 16px;">高德地图</div>
						<div style="width: 100%;height: 1px;background-color: #F0F0F0;"></div>
						<div style="width: 100%;height: 36px;line-height: 36px;text-align: center;color: black;font-size: 16px;">百度地图</div>
						<div style="width: 100%;height: 1px;background-color: #F0F0F0;"></div>
						<div style="width: 100%;height: 36px;line-height: 36px;text-align: center;color: black;font-size: 16px;">腾讯地图</div>
					</div>
					<div style="width: 100%;height: 54px;background: white;border-radius: 10px;margin-top: 14px;margin-bottom: 10px;" class="divCenter" id="btnCance">

						<span style="color: #999999;font-size: 16px;">取消</span>
					</div>

				</div>

			</div>

		</div>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/jquery-2.1.4.js"></script>
		<script>
			var slider = mui("#slider");

			slider.slider({
				interval: 3000
			});
			$('#btnBack').click(function() {
				mui.back();

			});
			$('#btnCance').click(function() {
				mui('#forward').popover('hide');

			})
		</script>
	</body>

</html>